<template>
  <div class="paper-container">
    <!-- 基本信息区域 -->
    <div class="basic-info">
      <el-row :gutter="20" class="info-row">
        <el-col :span="4"><span class="label">试卷名称：</span>{{ paperInfo.name }}</el-col>
        <el-col :span="4"><span class="label">地区：</span>{{ paperInfo.area }}</el-col>
        <el-col :span="3"><span class="label">年级：</span>{{ paperInfo.grade }}</el-col>
        <el-col :span="3"><span class="label">科目：</span>{{ paperInfo.subject }}</el-col>
        <el-col :span="4"><span class="label">学生姓名：</span>{{ studentInfo.name }}</el-col>
      </el-row>
    </div>
   

    <div class="operation">
        <div class="timer">剩余时间
            <span :style="{ color: leftTime <= 5 ? 'red' : '' }">{{ leftTime }} 分钟</span>
        </div>
        <el-button type="primary" @click.stop="handleSubmit">提交</el-button>
    </div>
    <!-- 试卷内容区域 -->
    <div class="paper-content">
      <!-- 选择题部分 -->
      <div class="question-section">
        <h3 class="section-title">一、选择题 (共 {{ choiceQuestions.length }} 题)</h3>
        <div class="questions-list">
          <div v-for="(q, index) in choiceQuestions" :key="q.id" class="question-item">
            <div class="question-header">
              <span class="question-number">{{ index + 1 }}.</span>
              <el-tag :type="q.info.isMultiple ? 'success' : 'primary'" size="small" class="question-type-tag">
                {{ q.info.isMultiple ? '多选题' : '单选题' }}
              </el-tag>
              <div class="question-stem">{{ q.info.name }}</div>
              <span class="question-score">({{ q.score }}分)</span>
            </div>
            <div class="question-options">
               <el-checkbox-group v-model="q.info.multipleAnswers" v-if="q.info.isMultiple">
                    <div v-for="(option, index) in q.info.options" :key="index" class="option-item">
                      <div class="option-selector">
                        <el-checkbox :label="option.label" :key="option.value" :value="option.value" />
                      </div>

                    </div>
                  </el-checkbox-group>
                  <el-radio-group  v-model="q.info.singleAnswer" v-if="!q.info.isMultiple">
                    <div v-for="(option, index) in q.info.options" :key="index" class="option-item">
                      <div class="option-selector">
                        <el-radio :label="option.label" :key="option.value" :value="option.value" />
                      </div>
                    </div>
                  </el-radio-group>
            </div>
          </div>
        </div>
      </div>

      <!-- 填空题部分 -->
      <div class="question-section">
        <h3 class="section-title">二、填空题 (共 {{ fillQuestions.length }} 题)</h3>
        <div class="questions-list">
          <div v-for="(q, index) in fillQuestions" :key="q.id" class="question-item">
            <div class="question-header">
              <span class="question-number">{{ index + 1 }}.</span>
              <span class="question-score">({{ q.score }}分)</span>
            </div>
            <div class="fill-blanks">
              <div class="question-name">{{ q.info.name }}</div>
              <div class="question-name" v-if="q.info.description">{{ q.description }}</div>
              <el-input
                v-model="q.info.singleAnswer"
                type="textarea"
                :rows="2"
                placeholder="请在此处作答"
                class="answer-input"
              ></el-input>
            </div>
          </div>
        </div>
      </div>

      <!-- 解答题部分 -->
      <div class="question-section">
        <h3 class="section-title">三、解答题 (共 {{ answerQuestions.length }} 题)</h3>
        <div class="questions-list">
          <div v-for="(q, index) in answerQuestions" :key="q.id" class="question-item">
            <div class="question-header">
              <span class="question-number">{{ index + 1 }}.</span>
              <div class="question-stem">{{ q.stem }}</div>
              <span class="question-score">({{ q.score }}分)</span>
            </div>
            <div class="fill-blanks">
              <div class="question-name">{{ q.info.name }}</div>
              <div class="question-name" v-if="q.info.description">{{ q.description }}</div>
              <el-input
                v-model="q.info.singleAnswer"
                type="textarea"
                :rows="5"
                placeholder="请在此处作答"
                class="answer-input"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElRow, ElCol, ElTag, ElInput, ElMessage } from 'element-plus';

// 接收父组件传入的试卷信息和学生信息
const props = defineProps({
  name: 'testPaperRender', // 试卷渲染 -- 学生使用页面
  paperInfo: {
    type: Object,
    required: true,
    default: () => ({
      name: '默认试卷',
      area: '安徽-合肥',
      grade: '高一',
      subject: '数学'
    })
  },
  studentInfo: {
    type: Object,
    required: true,
    default: () => ({
      name: '未知学生'
    })
  },
  questions: {
    type: Array,
    required: true,
    default: () => []
  }
});

// 先试用mockData  数据 模拟
const mockData = {
  name: '默认试卷',
  area: '安徽-合肥',
  grade: '高一',
  subject: '数学',
  examTime: 60, // 考试时间，单位分钟
  questions: { // 题目
    choice: [
        {
            id: 1,
            content: '1', // 关联的是题目的id 
            score: 10,
            info: {
                name: '选择1',   // 题目题干
                description: '', // 题目描述
                type: 'choice',
                options: [
                    { label: '选项A', value: 'A' },
                    { label: '选项B', value: 'B' },
                    { label: '选项C', value: 'C' },
                    { label: '选项D', value: 'D' }
                ],
                isMultiple: false,
                singleAnswer: null,   // 单选答案
                multipleAnswers: [],   // 多选答案（改为数组存储）
                referenceAnswer: 'A',   // 参考答案
                answerInfo: '',        // 答案解析
                knowledgePoints: []  // 新增：关联知识点数组
            }
        },
        {
            id: 2,
            content: '2',
            score: 10,
            info: {
                name: '选择2',
                description: '',
                type: 'choice',
                options: [
                    { label: '选项A', value: 'A' },
                    { label: '选项B', value: 'B' },
                    { label: '选项C', value: 'C' },
                    { label: '选项D', value: 'D' }
                ],
                isMultiple: true,
                singleAnswer: null,   // 单选答案
                multipleAnswers: [],   // 多选答案（改为数组存储）
                referenceAnswer: 'C',   // 参考答案
                answerInfo: '',        // 答案解析
                knowledgePoints: []  // 新增：关联知识点数组
            }
        },            
    ],
    fill: [
       {
            id: 4,
            content: '4',
            score: 10,
            info: {
                name: '填空4',
                description: '',
                type: 'fill',
                options: [],
                isMultiple: true,
                singleAnswer: null,   // 单选答案/ 答案
                multipleAnswers: [],   // 多选答案（改为数组存储）
                referenceAnswer: 'C',   // 参考答案
                answerInfo: '',        // 答案解析
                knowledgePoints: []  // 新增：关联知识点数组
            }
        }, 

    ],
    answer: [

    {
            id: 4,
            content: '4',
            score: 30,
            info: {
                name: '解答4',
                description: '',
                type: 'answer',
                options: [],
                isMultiple: true,
                singleAnswer: null,   // 单选答案/ 答案
                multipleAnswers: [],   // 多选答案（改为数组存储）
                referenceAnswer: 'C',   // 参考答案
                answerInfo: '',        // 答案解析
                knowledgePoints: []  // 新增：关联知识点数组
            }
        },
    ],
  }
};


// 按题型分类题目
const choiceQuestions = ref(mockData.questions.choice);

const fillQuestions = ref(mockData.questions.fill);

const answerQuestions = ref(mockData.questions.answer);

// 剩余时间
let leftTime = ref(mockData.examTime);
let timer = null;

onMounted(() => {
  // 每分钟更新一次倒计时
  timer = setInterval(() => {
    if (leftTime.value > 0) {
      leftTime.value--;
    } else {
      clearInterval(timer);
      ElMessage.error('考试时间已结束！');
      // 可以在这里添加提交试卷的逻辑
      handleSubmit()
    }
  }, 60000); // 60000毫秒 = 1分钟
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});





// 提交 --- 检查所有题目是否都有答案, 没有给出对应的提示
// 当时间到了，强制交卷，不验证是否都填写了答案
async function handleSubmit() {
    if (leftTime > 0) {
      // 检查所有题目是否都有答案
        for (const question of [...choiceQuestions.value, ...fillQuestions.value, ...answerQuestions.value]) {
            if (!question.info.singleAnswer && !question.info.multipleAnswers.length) {
                ElMessage.error(`请完成第 ${question.id} 题`);
                return;
            }
        }
    }
    //后端 api, 提交试卷
     
   
}


</script>

<style scoped>
.paper-container {
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
}
.operation {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
}
.basic-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.info-row {
  align-items: center;
}

.label {
  font-weight: bold;
  color: #333;
  margin-right: 5px;
}

.paper-content {
  height: calc(100vh - 180px);
  overflow-y: auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.question-section {
  margin-bottom: 30px;
}

.section-title {
  padding-bottom: 10px;
  border-bottom: 2px solid #e6e6e6;
  margin-bottom: 15px;
  color: #1f2937;
}

.questions-list {
  padding-left: 10px;
}

.question-item {
  margin-bottom: 25px;
  padding: 15px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.question-item:hover {
  background-color: #f9fafb;
}

.question-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.question-number {
  font-weight: bold;
  margin-right: 10px;
  color: #1f2937;
  min-width: 24px;
}

.question-type-tag {
  margin-right: 10px;
  height: 22px;
  line-height: 22px;
}

.question-stem {
  flex: 1;
  line-height: 1.6;
  color: #374151;
}

.question-score {
  margin-left: 10px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.question-options {
  padding-left: 34px;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.option-label {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background-color: #e5e7eb;
  margin-right: 10px;
  font-weight: 500;
}

.option-content {
  line-height: 1.5;
}

.fill-blanks {
  padding-left: 34px;
}

.blank-item {
  margin-bottom: 10px;
}

.blank-input {
  width: 150px;
  display: inline-block;
  margin-right: 10px;
}

.answer-input {
  width: 100%;
  margin-top: 10px;
}
</style>